<template>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%"
            default-expand-all>

    <el-table-column type="index" width="50" />
    <el-table-column prop="userid" label="userid"  />

    <el-table-column
        prop="permissionName"
        label="permissionName"

        filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
            :type="tableData[scope.$index].permissionName === 'user' ? 'danger' : 'success'"
            disable-transitions
        >{{tableData[scope.$index].permissionName}}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="权限id" prop="name" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-select v-model="select[scope.$index]" class="m-2" :placeholder="select[scope.$index]" size="small">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />

        </el-select>
        <el-button type="success" :icon="comp.Che" circle @click="update(scope.$index)"/>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts" setup>
import {defineComponent, ref} from 'vue'
import type { TableInstance } from 'element-plus'

import { getUserPermissionList } from '@/api/user'
import {Check, Delete, Edit} from "@element-plus/icons-vue";
const search = ref('')
const value = ref('')
const select = ['value1','value2','value3','value4','value5']
const comp = defineComponent({
  Che:Check
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const PageParam = {
      pageSize: 0,
      pageLocal: 1
}
const tableData = ref<UserPermission[]>([])
getUserPermissionList(PageParam).then((res) => {
  console.log(res)
  //alert(res.total)
  tableData.value = res.list

})
function update (index:number){
  alert(index)
  alert(options[index].value)
}

const tableRef = ref<TableInstance>()





</script>

<style scoped>

</style>